import { ReactElement, useContext } from 'react'
import { Empty, Skeleton } from 'antd'
// import FreeScrollBar from 'react-free-scrollbar'
import style from './index.module.less'
import Item from './components/item'
import { Context } from '../../context'
import { CaseSchema } from '@src/components/schema/caseSchema'
import { filterEmptyStr, formatMoney } from '@src/assets/js/tool'
import CaseAction from './components/caseAction'
import AcceptSecretarior from './components/acceptSecretarior'
import BusinessSecretarior from './components/businessSecretarior'
import Procedure from './components/procedure'
import CloseType from './components/closeType'
import Arbitrator from './components/arbitrator'
import Applicant from './components/applicant'
import Respondant from './components/respondant'
import DisputeAmount from './components/disputeAmount'
import CounterDisputeAmount from './components/counterDisputeAmount'

// 格式化仲裁员
function formatArbitrator (c: CaseSchema): string {
  const r: string[] = []
  if (typeof c.arbitrator === 'string' && c.arbitrator.length > 0) {
    r.push(c.arbitrator)
  }
  if (typeof c.arbitrator1 === 'string' && c.arbitrator1.length > 0) {
    r.push(c.arbitrator1)
  }
  if (typeof c.arbitrator2 === 'string' && c.arbitrator2.length > 0) {
    r.push(c.arbitrator2)
  }
  if (r.length > 0) {
    return r.join()
  }
  return '无'
}

function Main (): ReactElement {
  const { caseDetail: c, loading } = useContext(Context)
  return (
    <div className={style.container}>
      <div className={style.header}>
        <span className={style['header-title']}>案件基本信息</span>
      </div>
      {
        loading && (
          <div className={style.loading}>
             <Skeleton active />
          </div>
        )
      }
      {
        !loading && c === null && (
          <div className={style.empty}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </div>
        )
      }
      {
        !loading && c !== null && (
          <div className={style.inner}>
            <Item label='案号' value={filterEmptyStr(c.caseno_desc)} />
            <Item label='案由' value={filterEmptyStr(c.cause_action)} Modal={CaseAction} />
            <Item label='受理秘书' value={filterEmptyStr(c.accepter)} Modal={AcceptSecretarior} />
            <Item label='办案秘书' value={filterEmptyStr(c.processer)} Modal={BusinessSecretarior} />
            <Item label='仲裁程序' value={filterEmptyStr(c.procedure)} Modal={Procedure} />
            <Item label='仲裁员' value={formatArbitrator(c)} Modal={Arbitrator} />
            <Item label='结案类型' value={filterEmptyStr(c.closure_type)} Modal={CloseType} />
            <Item label='申请人' value={filterEmptyStr(c.applicant_name)} Modal={Applicant} />
            <Item label='被申请人' value={filterEmptyStr(c.respondent_name)} Modal={Respondant} />
            <Item label='标的' value={`${formatMoney(c.dispute_amount)} 元`} Modal={DisputeAmount} />
            <Item label='反请求标的' value={`${formatMoney(c.counter_dispute_amount)} 元`} Modal={CounterDisputeAmount} />
          </div>
        )
      }
    </div>
  )
}

export default Main
